<template>
	<div class="panel-wrapper row">
		<div class="label row items-center">
			<el-tooltip
				content="车辆入场/出场时识别到车牌首字省份在本规则配置范围，将进行预警"
				placement="right"
				effect="light"
			>
				<img class="tip-img" src="@/assets/images/home/question.png" alt="" />
			</el-tooltip>

			<span>匹配车牌首字：</span>
		</div>
		<div class="box">
			<el-checkbox
				:disabled="!isOpenWarning"
				:model-value="list.indexOf(item) > -1"
				:label="item"
				class="check"
				v-for="(item, i) in provinceNameList"
				:key="'pro' + i"
				@change="(e) => checkChange(e, item)"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits(["changeProvince"]);
const props = defineProps({
	isOpenWarning: {
		type: Boolean,
		default: () => true,
	},
	list: {
		type: Array,
		required: true,
		default: () => [],
	},
});

const provinceNameList = [
	"京",
	"津",
	"沪",
	"渝",
	"冀",
	"晋",
	"辽",
	"吉",
	"黑",
	"苏",
	"浙",
	"皖",
	"闽",
	"赣",
	"鲁",
	"豫",
	"鄂",
	"湘",
	"粤",
	"琼",
	"川",
	"黔",
	"滇",
	"陕",
	"甘",
	"青",
	"藏",
	"港",
	"澳",
	"台",
	"桂",
	"宁",
	"新",
];

const checkChange = (isChecked: boolean, province: string) => {
	emit("changeProvince", { isChecked, province });
};
</script>

<style scoped lang="scss">
.panel-wrapper {
	margin-top: 24px;
	.tip-img {
		width: 14px;
		height: 14px;
		margin-right: 4px;
	}
	.label {
		width: 120px;
		margin-right: 8px;
		flex-shrink: 0;
	}
	.box {
		width: 440px;
		.check {
			margin-right: 12px;
		}
	}
}
</style>
